<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    姓 : <input type="text" v-model="firstName"> <br>
    名 : <input type="text" v-model="lastName">  <br>
    <br>
    <br>
    <br>
    <input type="text" v-model="fullName">
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    // 1. 当模板过于复杂时 我们需要使用计算属性 来简化模板
    new Vue({
        el:"#app",
        data:{
            firstName:"T",
            lastName:"Mac"
        },
        computed:{
            fullName:{
                get(){
                    return `${this.firstName}-${this.lastName}`
                },
                set(newVal){
                   const [firstName,lastName] =  newVal.split("-")
                   this.firstName =  firstName;
                   this.lastName =  lastName;
                }
            }
        },

        mounted(){
            // setTimeout(()=>{
            //     //当计算属性得到改变时 其对应的set方法就会得到执行!
            //     //set方法的第一个参数是 最新的值
            //     this.fullName = "xx"
            // },2000)
        }
    })
</script>
</html>